<template>
	<!--专属红包-->
	<view>
		<view v-if="message.mode===2" class="red-frame red-frame-special d-flex d-r a-center" :class="{disable:status!=0}">
			<image style="width: 60rpx;height: 60rpx;" src="/static/image/transfer-accounts.png"></image>
			<view>
				<text class="frame-text">{{message.remark}}</text>
				<text v-if="status == 0" class="frame-disable">给{{nickName(message?.directUserId,message?.directUserName)}}的专属红包</text>
				<text v-if="status == 3 || status == 1" class="frame-disable">已领取</text>
				<text v-if="status == 4" class="frame-disable">已过期</text>
				<text v-if="status == 2" class="frame-disable">已领取</text>
			</view>
		</view>
		<!--拼手气红包与普通红包-->
		<view v-else class="red-frame red-frame-ordinary d-flex d-r a-center" :class="{disable:status!=0}">
			<image class="frame-icon " src="/static/image/red-envelope.png"></image>
			<view v-if="message.mode == 0">
				<text class="frame-text">{{message.remark}}</text>
				<text v-if="status == 3 || status == 1" class="frame-disable">已领取</text>
				<text v-if="status == 4" class="frame-disable">已过期</text>
				<text v-if="status == 2" class="frame-disable">已抢完</text>
			</view>
			<view v-if="message.mode == 1">
				<text class="frame-text">{{message.remark}}</text>
				<text v-if="status == 3 || status == 1" class="frame-disable">已领取</text>
				<text v-if="status == 4" class="frame-disable">已过期</text>
				<text v-if="status == 2" class="frame-disable">已抢完</text>
			</view>
			<!--个人红包-->
			<view v-if="message.mode == null">
				<text class="frame-text">{{message.remark}}</text>
				<!--我为发起人-->
				<template v-if="message?.userId == userData.id">
					<text v-if="status == 1" class="frame-disable">已被领取</text>
				</template>
				<template v-else>
					<text v-if="status == 1 || status == 3" class="frame-disable">已领取</text>
				</template>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, watchEffect,nextTick, reactive, toRefs,computed } from 'vue';
import { userData as userDataStore } from "@/store/userData";
import { imStore } from "@/store/imStore";

const userData: any = userDataStore();
const MessageRed = defineComponent({
	props: {
		data: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	setup(props:any, ctx:any) {
		const IM_STORE = imStore();
		const data = reactive({
			message: {} as any,
			userData: {} as any,
			status:0,
			show:false
		});
		watchEffect(()=>{
			data.message = props.data;
			data.userData = userData;
			let key = data.message.redId + userData.id
			
			uni.getStorage({
				key: key,
				success: (res) => {
					data.status = res.data
				},
				fail:()=>{
					data.status = 0
				},
				complete:()=>{
					nextTick(()=>{
						data.show = true
					})
				}
			});
		});
		//获取备注名称
		const nickName = (userId:string,nick:string) => {
			let remark = null;
			let nameCard = null;
			IM_STORE.friends.forEach((f: any) => {
				if (f.userID === userId) {
					remark = f.remark;
				}
			});
			let type  = IM_STORE?.conversation?.type;
			if (type === "GROUP") {
				let userData:any = IM_STORE?.groupMembers.find((item:any) => item.userID === userId);
				if(userData?.nameCard !='')nameCard = userData?.nameCard
			}
			return remark || nameCard || nick;
		};
		return {
			...toRefs(data),
			nickName
		};
	}
});
export default MessageRed
</script>

<style lang="scss" scoped>
.red-frame-special{
	background-color: #29DBA3;
	&.disable{
		background-color:#73DBBB;
	}
}
.red-frame-ordinary{
	background-color: #FA9D3B;
	&.disable{
		background-color:#FFCD8F;
	}
}
.red-frame{
	width: 490rpx;
	height: 160rpx;
	border-radius: 20rpx;
	padding-left: 30rpx;
	.frame-icon{
		width: 66rpx;
		height: 80rpx;
	}
	.frame-text{
		padding-left: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #FFFFFF;
		width: 364;
		overflow: hidden; /* 隐藏超出容器的内容 */  
		white-space: nowrap; /* 防止文本换行 */  
		text-overflow: ellipsis; /* 显示省略号 */  
	}
	.frame-disable{
		padding-left: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}

/*     公共属性     */
.psr {
    position: relative;
}

.psa {
    position: absolute;
}

.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}


.a-center {
    align-items: center;
}

.j-center{
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}


.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
    
}
.d-r {
    flex-direction: row !important;
}

.j-end {
    justify-content: flex-end;
}


.wrap {
    flex-wrap: wrap;
}

.nowrap {
    flex-wrap: nowrap;
}

.uline{
    text-decoration: underline;
}

.c_main{
    color:$slim-main;
}

.b_main{
    background-color:$slim-main;
}
</style>